import React, { ReactElement, useEffect, useContext, useMemo } from 'react';
import { View, Animated, Easing, Image } from 'react-native';

import styles from './style';
import {
  signInLight,
  starOne,
  starThree,
  starTwo,
  starZero
} from '../../../../constant/resource';
import { Store } from '../../reducer';
import { getProblemIsAllWrong, setShowProblemResult } from '../../actions';
import { phonePx } from '../../../../util/adapt';
import GetCoinAnimate from '../GetCoinAnimate';
import BeeText from '../../../../components/BeeText';

const spinValue: Animated.Value = new Animated.Value(0);

const spinRotate = spinValue.interpolate({
  inputRange: [0, 1], // 输入值
  outputRange: ['0deg', '-360deg'] // 输出值
});

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { showProblemResult, problemResult } = state;
  const { withSmall, isCorrect, results, addGoldCoinNum } = problemResult;

  let wrongNumber = 0;

  if (!withSmall) {
    wrongNumber = isCorrect ? 0 : 1;
  } else {
    wrongNumber = results.reduce((total, current): number => {
      const val = current.isCorrect ? 0 : 1;
      return total + val;
    }, 0);
  }

  const allWrong = getProblemIsAllWrong();

  useEffect((): (() => void) => {
    if (!showProblemResult) return (): void => {};
    const timer = Animated.loop(
      Animated.timing(spinValue, {
        toValue: 1, // 最终值 为1，这里表示最大旋转 360度
        duration: 15 * 1000,
        easing: Easing.linear,
        useNativeDriver: true
      })
    );
    timer.start();

    return (): void => {
      timer.stop();
    };
  }, [showProblemResult]);

  useEffect((): void => {
    if (!showProblemResult) return;
    if (allWrong) {
      setTimeout((): void => {
        setShowProblemResult(false);
      }, 2000);
    }
  }, [allWrong, showProblemResult]);

  return useMemo((): ReactElement => {
    if (!showProblemResult) return <View />;
    return (
      <View style={styles.container}>
        {allWrong ? (
          <Image source={starZero} style={styles.zero} />
        ) : (
          <View style={styles.content}>
            <Animated.Image
              style={[styles.light, { transform: [{ rotate: spinRotate }] }]}
              source={signInLight}
            />
            {wrongNumber === 0 && (
              <Image source={starThree} style={styles.haveCorrect} />
            )}
            {wrongNumber === 1 && (
              <Image source={starTwo} style={styles.haveCorrect} />
            )}
            {wrongNumber === 2 && (
              <Image source={starOne} style={styles.haveCorrect} />
            )}
            <View style={styles.coinContent}>
              {addGoldCoinNum > 0 && (
                <GetCoinAnimate
                  style={styles.coinList}
                  addGoldCoinNum={addGoldCoinNum}
                  clearGoldCoinNum={(): void => {
                    setShowProblemResult(false);
                  }}
                  scale={0.385}
                  x={phonePx(278.5)}
                  y={phonePx(-3)}
                  width={phonePx(26)}
                  height={phonePx(26)}
                  needBaseGoldCoin
                >
                  <View style={styles.numberContent}>
                    <BeeText style={styles.coin}>金币</BeeText>
                    <BeeText style={styles.add}>*</BeeText>
                    <BeeText style={styles.number}>{addGoldCoinNum}</BeeText>
                  </View>
                </GetCoinAnimate>
              )}
            </View>
          </View>
        )}
      </View>
    );
  }, [addGoldCoinNum, allWrong, showProblemResult, wrongNumber]);
};
